<template>
  <view class="con">
    <view class="firstLine">
      <view class="left">测试店铺 <text class="title">新品需求</text></view>
      <view class="right">待处理</view>
    </view>
    <view class="labelLine">
      <view class="label">商户名称</view>
      <view class="value">02灶</view>
    </view>
    <view class="labelLine">
      <view class="label">其他描述</view>
      <view class="value">描述内容</view>
    </view>
    <view class="labelLine">
      <view class="label">商品图片</view>
    </view>
    <u-scroll-list :indicator="false">
      <view class="imgBox" v-for="(item, index) in 8" :key="index">
        <image src="" mode=""></image>
      </view>
    </u-scroll-list>
  </view>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
.con {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx 40rpx;
  .firstLine {
    display: flex;
    justify-content: space-between;
    padding-bottom: 24rpx;
    border-bottom: 1px solid #f5f5f5;
    .left {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333333;
      line-height: 44rpx;
      .title {
        font-weight: 600;
        margin-left: 8rpx;
      }
    }
    .right {
      font-size: 26rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #21cca2;
      line-height: 36rpx;
    }
  }
  .labelLine {
    margin-top: 32rpx;
    display: flex;
    font-size: 26rpx;

    .label {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #bebebe;
    }
    .value {
      font-family: DINPro-Medium, DINPro;
      font-weight: 500;
      color: #333333;
      margin-left: 48rpx;
    }
  }
}
.imgBox {
  width: 176rpx;
  height: 176rpx;
  border-radius: 8rpx;
  position: relative;
  margin-top: 30rpx;
  margin-right: 20rpx;
  image {
    width: 176rpx;
    height: 176rpx;
    background: #7ca6bc;
  }
}
</style>
